<template>
  <div class="home">
    <Header head-title="立即咨询" go-back="true"></Header>
    <p class="fontsM JS">重要：急重症不适合网上咨询，请立即前往当地医院就诊</p>
    <section class="group Select fonts">
        <h3>咨询用户</h3>
         <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </section>
    <section class="group">
        <h3 class="fonts HomeH">症状描述</h3>
        <textarea data-v-a8ac6a2a="" name="" id="" cols="30" rows="10" class="SerTexa" placeholder="为了更好的回答您的问题，请详细描述您的情况，包括症状表现、患病时间、检查结果、用药情况及就医情况等。"></textarea>
    </section>

    <section class="group">
        <h3 class="fonts HomeH">相关材料
            <span class="fontC fontsMin">（例如病例、照片等，最多添加6张）</span>
        </h3>
        <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
        <!-- 上传的地址，必传参数 -->
        <el-upload :limit="6" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" :on-exceed="handleExceed">
            <section v-if="UpLoad">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </section>
        </el-upload>
        <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="6">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" >
                        <i class="el-icon-download"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete"  @click="handleRemove(file)" >
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog> -->
    </section>

    <section class="group">
        <h3 class="HomeH HomeH1 fonts">咨询意向</h3>
        <section class="Select fontsMin">
            <div v-for="(item,index) in List" :key="index" class="radio" :class="label == index ? 'radioActive' : ''" @click="LabelA(index)">
                {{ item.name }}
            </div>
        </section>
    </section>

    <Loading v-if="ShowLoading"></Loading>
    <el-button type="primary" @click="InquireNow()" class="Login gotoPay">确认咨询</el-button>
  </div>
</template>

<script>
import Header from '../../../components/Header'

export default {
  data () {
    return {
      ShowLoading: false,
      options: [{
        value: '1',
        label: '张三丰'
      }, {
        value: '2',
        label: '陈圆圆'
      }, {
        value: '3',
        label: '特朗普'
      }, {
        value: '4',
        label: '铁木真'
      }, {
        value: '5',
        label: '渣渣辉'
      }],
      value: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,

      label: -1,
      List: [
        { name: '就诊意见' },
        { name: '我要开方' },
        { name: '报告解读' },
        { name: '注意事项' }
      ],

      fileList: [],
      UpLoad: true
    }
  },
  components: {
    Header
  },
  mounted () {

  },
  methods: {
    //  删除
    // handleRemove (file) {
    //   console.log(file)
    // },
    LabelA (index) {
      this.label = index
    },
    //  放大
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //  下载
    handleDownload (file) {
      // console.log(file)
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview (file) {
      // console.log(file)
    },
    //  文件超过六个
    handleExceed (files, fileList) {
    //   this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      this.$message.warning('当前限制选择 6 个文件')
    }
  }
}
</script>

<style scoped>
.home {
  padding-bottom: 1rem;
}
.JS {
    line-height: 0.6rem;
    color: red;
    padding: 0.2rem;
}
.HomeH1 {
    margin-bottom: 0.2rem;
}
.radio {
    border-color: #aaa;
    color: #aaa;
}
.radioActive {
    color: #fff;
    border: none;
}
</style>
